/**
 * Created by Administrator on 2017/11/29.
 */
import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input, DatePicker, Select, Button,Modal,Row,Col, Card, InputNumber, Radio, Icon, Tooltip,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './sysParam.less';
import SystemParam from '../../components/SystemParamConfig';
import SystemEditAndAdd from '../../components/SystemParamConfig/SystemEditAndAdd';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);

const FormItem = Form.Item;
const {Option} = Select;
const {RangePicker} = DatePicker;
const {TextArea} = Input;

@connect(state => ({
    systemConfig: state.systemConfig,
}))
@Form.create()
export default class SysParamConfig extends PureComponent {
    state={
        modalVisible:false,
        editType:'add',
        record:{},
        formValues:{},
    }
    componentDidMount(){
        this.props.dispatch({
            type:'systemConfig/querySystemConfig',
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.dispatch({
                    type: 'systemConfig/insertSystemConfig',
                    payload: {...values},
                });
                this.props.form.resetFields();
            }
        });
    }
    handleEdit=(record)=>{
        this.handleModalVisible(true);
        this.setState({
            editType:'mod',
            record:record,
        })
    };
    handleDel=()=>{

    };
    handleAdd=(flag)=>{
        this.handleModalVisible(flag);
        this.setState({
            editType:'add',
        })
    };
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    };
    //表格页数修改之后执行
    handleTableChange=(pagination,filtersArg,sorter)=>{
        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...filters,
        };

        if (sorter.field) {
            params.sorter = `${sorter.field}_${sorter.order}`;
        }

        this.props.dispatch({
            type: 'systemConfig/querySystemConfig',
            payload: params,
        });
    }
    handleModalSuccess=(pagination)=>{
        const params={
            currentPage:pagination.currentPage,
            pageSize:pagination.pageSize,
        }
        this.props.dispatch({
            type:'systemConfig/querySystemConfig',
            payload:params,
        })
    }
    handleSearch=(e)=>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                this.setState({
                    formValues:values,
                });
                this.props.dispatch({
                    type:'systemConfig/querySystemConfig',
                    payload:values,
                });
            }
        });
    }
    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem label="参数编码">
                            {getFieldDecorator('paramCode')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="参数名称">
                            {getFieldDecorator('paramName')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
            <span className={styles.sumbitButtons}>
              <AuthButton auth="SystemConfig.search" type="primary" htmlType="submit">查询</AuthButton>
              <AuthButton auth="SystemConfig.reset" style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</AuthButton>
            </span>
                    </Col>
                </Row>
            </Form>
        );
    };
    renderForm() {
        return this.renderSimpleForm();
    }
    handleFormReset = () => {
       this.setState({
           formValues:{},
       })
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type:'systemConfig/querySystemConfig',
            payload:{},
        })
    }
    render() {
        const {submitting, form,systemConfig:{loading:paramLoading,data}} = this.props;
        const {getFieldDecorator, getFieldValue} = form;

        const {modalVisible,editType,record}=this.state;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <PageHeaderLayout title="参数表单">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                    <div className={styles.tableListForm}>
                        {this.renderForm()}
                    </div>
                    <div className={styles.tableListOperator}>
                        <AuthButton auth="SystemConfig.new" icon="plus" type="primary" onClick={() => this.handleAdd(true)}>新建</AuthButton>
                    </div>
                    <SystemParam
                        data={data}
                        loading={paramLoading}
                        handleEdit={this.handleEdit}
                        handleDelete={this.handleDel}
                        onChange={this.handleTableChange}
                    />
                    <Modal
                        title={editType === 'add' ? '新增系统参数' :'编辑系统参数'}
                        visible={modalVisible}
                        footer={null}
                        key={new Date()}
                        onOk={()=>this.handleAdd(true)}
                        onCancel={()=>this.handleModalVisible(false)}
                    >
                        <SystemEditAndAdd pagination={data.pagination}
                                          editType={editType}
                                          record={record}
                                          handleModalVisible={()=>this.handleModalVisible(false)}
                                          handleCancel={()=>this.handleModalVisible(false)}
                                          handleModalSuccess={this.handleModalSuccess}/>
                    </Modal>
                    </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}

